<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <script src="/Public/assets/js/echarts.min.js"></script>
    <link rel="stylesheet" href="/Public/assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="/Public/assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="/Public/assets/css/app.css">
    <script src="/Public/assets/js/jquery.min.js"></script>
    <link rel="stylesheet" href="/Public/tools/php_img_upload/control/css/zyUpload.css" type="text/css">
</head>

<body data-type="widgets">
    <script src="/Public/assets/js/theme.js"></script>
    <div class="am-g tpl-g">
        <!-- 头部 -->
        <include file="Public/tpl/admintop.html"/>
        <!-- 风格切换 -->
        <div class="tpl-skiner">
            <div class="tpl-skiner-toggle am-icon-cog">
            </div>
            <div class="tpl-skiner-content">
                <div class="tpl-skiner-content-title">
                    选择主题
                </div>
                <div class="tpl-skiner-content-bar">
                    <span class="skiner-color skiner-white" data-color="theme-white"></span>
                    <span class="skiner-color skiner-black" data-color="theme-black"></span>
                </div>
            </div>
        </div>
        <!-- 侧边导航栏 -->
         <include file="Public/tpl/adminLeft.html"/>
        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">

            <div class="container-fluid am-cf">
                <div class="row">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                        <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 表单 <small></small></div>
                        <p class="page-header-description">产品数据添加</p>
                    </div>
                    <div class="am-u-lg-3 tpl-index-settings-button">
                        <button type="button" class="page-header-button"><span class="am-icon-paint-brush"></span> 设置</button>
                    </div>
                </div>

            </div>

            <div class="row-content am-cf">


                

                <div class="row">

                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">边框表单</div>
                                <div class="widget-function am-fr">
                                    <a href="javascript:;" class="am-icon-cog"></a>
                                </div>
                            </div>
                            <div class="widget-body am-fr">

                                <form class="am-form tpl-form-border-form tpl-form-border-br" action="/Admin/Product/add?id={$data.id}&images={$data.images}" method="post">
                                    <div class="am-form-group">
                                        <label for="user-name" class="am-u-sm-3 am-form-label">标题 <span class="tpl-form-line-small-title">Title</span></label>
                                        <div class="am-u-sm-9">
                                            <input type="text" class="tpl-form-input" id="user-name" placeholder="请输入标题文字" name="title" value="{$data.title}">
                                            <small>请填写标题文字10-20字左右。</small>
                                        </div>
                                    </div>
                                    <div class="am-form-group">
                                        <label for="user-name" class="am-u-sm-3 am-form-label">价格 <span class="tpl-form-line-small-title">price</span></label>
                                        <div class="am-u-sm-9">
                                            <input type="text" class="tpl-form-input" id="user-name" placeholder="请输入价格" name="price" value="{$data.price}">
                                            <small>请输入价格</small>
                                        </div>
                                    </div>
                                     <div class="am-form-group">
                                        <label for="user-name" class="am-u-sm-3 am-form-label">原始价格 <span class="tpl-form-line-small-title">originprice</span></label>
                                        <div class="am-u-sm-9">
                                            <input type="text" class="tpl-form-input" id="user-name" placeholder="请输入原始价格" name="originprice" value="{$data.originprice}">
                                            <small>请输入价格</small>
                                        </div>
                                    </div>
                                    <div class="am-form-group">
                                        <label for="user-name" class="am-u-sm-3 am-form-label">产品数量 <span class="tpl-form-line-small-title">count</span></label>
                                        <div class="am-u-sm-9">
                                            <input type="text" class="tpl-form-input" id="user-name" placeholder="请输入产品数量" name="count" value="{$data.count}">
                                            <small>请输入产品数量</small>
                                        </div>
                                    </div>
                                    <div class="am-form-group">
                                        <label for="user-name" class="am-u-sm-3 am-form-label">产品种类<span class="tpl-form-line-small-title">count</span></label>
                                        <div class="am-u-sm-9">
                                            <input type="text" class="tpl-form-input" id="productClass" placeholder="请输入产品种类" name="class" value="{$data.class}" ><br/>
                                            
                                           
                                        </div>
                                    </div>
                                     <div class="am-form-group">
                                        <label for="user-phone" class="am-u-sm-3 am-form-label">种类选择 <span class="tpl-form-line-small-title">select</span></label>
                                        <div class="am-u-sm-9">

                                            <select data-am-selected="" style="display: none;" id="pushClass1" onchange="showClass(this)" name="">
                                              <option value="0" selected="selected">一级目录</option>
                                             
                                            </select>
                                           
                                            <select data-am-selected="" style="display: none;" id="pushClass2" onchange="showClass1(this)" value="0 ">
                                              <option value="0" selected="selected">二级目录</option>
                                             
                                            </select>


                                            
                                            <select data-am-selected="" style="display: none;" id="pushClass3"  name="" onchange="showClass2(this)">
                                              <option value="0" selected="selected">三级目录</option>
                                             
                                            </select>
                                           
                                        </div>
                                    </div>




                                  

                                   <!--  <div class="am-form-group">
                                        <label for="user-phone" class="am-u-sm-3 am-form-label">作者 <span class="tpl-form-line-small-title">Author</span></label>
                                        <div class="am-u-sm-9">
                                            <select data-am-selected="{searchBox: 1}" style="display: none;">
  <option value="a">-The.CC</option>
  <option value="b">夕风色</option>
  <option value="o">Orange</option>
</select>

                                        </div>
                                    </div> -->

                                    <div class="am-form-group">
                                        <label for="user-name" class="am-u-sm-3 am-form-label">图片<span class="tpl-form-line-small-title">image</span></label>
                                        <div class="am-u-sm-9">
                                            <div  id="picture"></div>
                                            <button
                                            type="button" onclick="clear0()"
                                            class="am-btn am-btn-primary"
                                            data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 700, height: 500}">
                                           图片上传
                                            </button>
                                            <button class="am-btn am-btn-primary" type="button" onclick="clear1()">重选</button>
                                           
                                        </div>
                                    </div>
                                     <div class="am-form-group">
                                        <label for="user-name" class="am-u-sm-3 am-form-label">图片展示<span class="tpl-form-line-small-title">image</span></label>
                                        <div class="am-u-sm-9" id="show">
                                            <div id="tu">
                                                <volist name="data.images" id="val">
                                                        <img src="{$val}" alt=""  style="width:50px;height:50px;margin-left:10px">
                                                    
                                                </volist>
                                            </div>
                                           
                                        </div>
                                    </div>
                                    
                                   

                                   <!--  <div class="am-form-group">
                                        <label for="user-weibo" class="am-u-sm-3 am-form-label">封面图 <span class="tpl-form-line-small-title">Images</span></label>
                                        <div class="am-u-sm-9">
                                            <div class="am-form-group am-form-file">
                                                <div class="tpl-form-file-img">
                                                    <img src="/Public/assets/img/a5.png" alt="">
                                                </div>
                                                <button type="button" class="am-btn am-btn-danger am-btn-sm">
    <i class="am-icon-cloud-upload"></i> 添加封面图片</button>
                                                <input id="doc-form-file" type="file" multiple="">
                                            </div>

                                        </div>
                                    </div> -->

                                    

                                   

                                    <div class="am-form-group">
                                        <label for="user-intro" class="am-u-sm-3 am-form-label">文章内容</label>
                                        <div class="am-u-sm-9">
                                            <script id="container" name="detail" type="text/plain" value="{$data.detail}" >
                                                
                                            </script>
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <div class="am-u-sm-9 am-u-sm-push-3">
                                            <button type="submit" class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                </div>


            </div>
        </div>
    </div>
    </div>






<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">图片上传
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd">
      <div id="demo" class="demo"></div> 
    </div>
  </div>
</div>
<option value=""></option>

<script type="text/html" id="showCol0">
   
    <%for(var i=0 ;i < data.length; i++){%>
        <option value="<%=data[i].id%>"><%=data[i].name%></option>
    <%}%>            
</script>
<script type="text/html" id="showCol1">
   
        <option value="0" selected="selected">二级目录</option>
        <%for(var i=0 ;i < data.length; i++){%>
            <option value="<%=data[i].id%>"><%=data[i].name%></option>
        <%}%>     
    
           
</script>
<script type="text/html" id="showCol2">
    <option value="">三级目录</option>
    <%for(var i=0 ;i < data.length; i++){%>
        <option value="<%=data[i].name%>"><%=data[i].name%></option>
    <%}%>    
</script>




    <script type="text/javascript" src="/Public/tools/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/Public/tools/ueditor/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container',{
             toolbars: [
                [ 'source']
            ],
            autoHeightEnabled: true,
            autoFloatEnabled: true
        });
    </script>
    <script src="/Public/js/template-native.js"></script>
    <script src="/Public/js/showclass.js"></script>
    <script src="/Public/assets/js/amazeui.min.js"></script>
    <script src="/Public/assets/js/amazeui.datatables.min.js"></script>
    <script src="/Public/assets/js/dataTables.responsive.min.js"></script>
    <script src="/Public/assets/js/app.js"></script>
    <!--图片弹出层样式 必要样式-->
   <!--  <script type="text/javascript" src="/Public/tools/php_img_upload/jquery-1.7.2.js"></script> -->
    <!-- 引用核心层插件 -->
    <script type="text/javascript" src="/Public/tools/php_img_upload/core/zyFile.js"></script>
    <!-- 引用控制层插件 -->
    <script type="text/javascript" src="/Public/tools/php_img_upload/control/js/zyUpload.js"></script>
    <!-- 引用初始化JS -->
    <!-- <script type="text/javascript" src="/Public/tools/php_img_upload/demo.js"></script> -->
    <script type="text/javascript">
            $(function(){
    // 初始化插件
    var width = $(window).width();
    if ( width >= 650 )  width = '100%';
    else    width = "100%";

    $("#demo").zyUpload({
        width            :   width,                 // 宽度
        height           :   "auto",                 // 宽度
        itemWidth        :   "140px",                 // 文件项的宽度
        itemHeight       :   "100px",                 // 文件项的高度
        //url              :   "/upload/UploadAction",  // 上传文件的路径
        url              :   "/Admin/Product/up",
        inputName        :  'img[]',
        id               :   1,
        multiple         :   true,                    // 是否可以多个文件上传
        dragDrop         :   false,                    // 是否可以拖动上传文件
        del              :   true,                    // 是否可以删除文件
        finishDel        :   false,                   // 是否在上传文件完成后删除预览
        /* 外部获得的回调接口 */
        onSelect: function(selectFiles, allFiles){    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
            console.info("当前选择了以下文件：");
            console.info(selectFiles);
        },
        onProgress: function(file, loaded, total){    // 正在上传的进度的回调方法
            var eleProgress = $("#uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + '%';
            eleProgress.html(percent);
            console.info(file.index);
            console.info("当前正在上传此文件：");
            console.info(file.name);
            console.info("进度等信息如下：");
            console.info(loaded);
            console.info(total);
        },   
        onDelete: function(file, files){              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
            console.info("当前删除了此文件：");
            console.info(file.name);
        },
        onSuccess: function(file, response){          // 文件上传成功的回调方法
            var html='<input type="hidden" name="images[]" value="'+response+'">';
          
           $('#picture').append(html);
          
           $('#doc-modal-1').modal('close');
           //图片展示
           var image='<img src="'+response+'" alt="" style="width:50px;height:50px;float:left;margin-left:5px">';
           $('#show').append(image);
            
        },
        onFailure: function(file, response){          // 文件上传失败的回调方法
            $("#uploadImage_" + file.index).css("opacity", 0.2);
            console.info("此文件上传失败：");
            console.info(file.name);
        },
        onComplete: function(response){               // 上传完成的回调方法
            console.info("文件上传完成");
            console.info(response);
        }
    });
    
});




    </script>
    <script>
        function clear1(){
           
            $('#picture').html("");
            $('#show').html("");


        }
        function clear0(){

                $('#tu').html("");
        }


    </script>
    <script type="text/javascript">
    //取一级目录的数据
      $.get('/Api/Index/classSelect',{'fid':'0'},function(ret){

                     var html=template('showCol0',ret);
                     $('#pushClass1').append(html);
        })
     // function showClass(obj){
     //    var fid=$(obj).val();
     //    $('#pushClass2').html("");
     //    $.get('/Api/Index/classSelect',{'fid':fid},function(ret){
     //        var html=template('showCol1',ret);
     //        $('#pushClass2').unbind('change');
     //        $('#pushClass2').selected('destroy')
     //        $('#select2').find('select').remove();
     //        $('#select2').html(html);
     //        $('#pushClass2').selected();
     //        $('#pushClass2').on('change',function(){
     //            showClass1();
     //        })
     //    });
     // }
     function showClass(obj){
        var fid=$(obj).val();
        $('#pushClass2').html("");
        $.get('/Api/Index/classSelect',{'fid':fid},function(ret){
                var html=template('showCol1',ret);
                $('#pushClass2').append(html);
        })
     }
     function showClass1(obj){
        var fid=$(obj).val();
        $('#pushClass3').html("");
        $.get('/Api/Index/classSelect',{'fid':fid},function(ret){
                var html=template('showCol2',ret);
                $('#pushClass3').append(html);
        })
     }
     function showClass2(obj){
         var fid=$(obj).val();
         $('#productClass').val("");
         $('#productClass').val(fid);
     }


    </script>

</body>

</html>